<template>
  <div class="statement-management">
    <div class="block">
      <header>
        <h2>对账详情</h2>
      </header>
      <section>
        <el-row :gutter="40">
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                支付订单编码：
              </div>
              <div class="row-item-content">
                {{ detailData.reqNo || '' }}
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                订单编号：
              </div>
              <div class="row-item-content">
                {{ detailData.orderNo || '' }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                实付金额：
              </div>
              <div class="row-item-content">
                {{ detailData.payTotalAmount || '' }}
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                订单金额：
              </div>
              <div class="row-item-content">
                {{ detailData.orderTotalAmount || '' }}
              </div>
            </div>
          </el-col>
        </el-row>
      </section>
      <div class="hr" />
      <section>
        <el-row :gutter="40">
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                付款方：
              </div>
              <div class="row-item-content">
                {{ detailData.payerName || '' }}
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                付款方统一社会信用代码：
              </div>
              <div class="row-item-content">
                {{ detailData.payerUnifiedSocialCreditCode || '' }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                付款方银行名称：
              </div>
              <div class="row-item-content">
                {{ detailData.payerAccNoBank || '' }}
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                付款方银行账号：
              </div>
              <div class="row-item-content">
                {{ detailData.payerAccNo || '' }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                支付时间：
              </div>
              <div class="row-item-content">
                {{ detailData.paySuccessDate || '' }}
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                到账时间：
              </div>
              <div class="row-item-content">
                {{ detailData.toAccountDate || '' }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                备注：
              </div>
              <div class="row-item-content">
                {{ detailData.remark || '' }}
              </div>
            </div>
          </el-col>
        </el-row>
      </section>
      <div class="hr" />
      <section>
        <el-row :gutter="40">
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                收款方：
              </div>
              <div class="row-item-content">
                {{ detailData.payeeName || '' }}
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                收款方统一社会信用代码：
              </div>
              <div class="row-item-content">
                {{ detailData.payeeUnifiedSocialCreditCode || '' }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                收款方银行名称：
              </div>
              <div class="row-item-content">
                {{ detailData.payeeAccNoBank || '' }}
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="row-item">
              <div class="row-item-label">
                收款方银行账号：
              </div>
              <div class="row-item-content">
                {{ detailData.payeeAccNo || '' }}
              </div>
            </div>
          </el-col>
        </el-row>
      </section>
    </div>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
